<template>
  <div id="viewShow">
    <span class="title">设备故障预警</span>
    <vxe-table
      stripe
      border="inner"
      align="center"
      max-height="400"
      class="mytable-style"
      :row-class-name="rowClassName"
      :data="tableData">
      <vxe-table-column type="checkbox" width="60"></vxe-table-column>
      <vxe-table-column field="name" title="设备名称"></vxe-table-column>
      <vxe-table-column field="equipstatus" title="设备状态">
        <template v-slot="{ row }">
          <span v-if="row.age == 0" style="color: red;">{{row.equipstatus}}</span>
          <span v-if="row.age == 1" style="color: #FFFFFF;">{{row.equipstatus}}</span>
        </template>
      </vxe-table-column>
      <vxe-table-column field="age" title="预警状态">
        <template v-slot="{ row }">
          <i class="iconfont icon-jinggao1" style="color: red;" v-if="row.age == 0"></i>
          <i class="iconfont icon-gou" style="color: #FFFFFF;" v-if="row.age == 1"></i>
        </template>
      </vxe-table-column>
      <vxe-table-column field="maybe" title="可能性"></vxe-table-column>
      <vxe-table-column field="opentime" title="发生时间"></vxe-table-column>
      <vxe-table-column field="lastTime" title="上次保养时间"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        tableData:[{
          name:"冷却器",
          equipstatus:"能够完美的打开",
          age:1,
          maybe:"70%",
          opentime:"未来一天",
          lastTime:"2018/05/22"
        },{
          name:"阀门",
          equipstatus:"失效",
          age:0,
          maybe:"72%",
          opentime:"未来一天",
          lastTime:"2018/03/20"
        },{
          name:"冷却器",
          equipstatus:"失效",
          age:1,
          maybe:"70%",
          opentime:"未来一天",
          lastTime:"2018/05/22"
        },{
          name:"冷却器",
          equipstatus:"能够完美的打开",
          age:1,
          maybe:"70%",
          opentime:"未来一天",
          lastTime:"2018/05/22"
        },{
          name:"阀门",
          equipstatus:"失效",
          age:0,
          maybe:"72%",
          opentime:"未来一天",
          lastTime:"2018/03/20"
        },{
          name:"冷却器",
          equipstatus:"失效",
          age:1,
          maybe:"70%",
          opentime:"未来一天",
          lastTime:"2018/05/22"
        },{
          name:"冷却器",
          equipstatus:"能够完美的打开",
          age:1,
          maybe:"70%",
          opentime:"未来一天",
          lastTime:"2018/05/22"
        },{
          name:"阀门",
          equipstatus:"失效",
          age:0,
          maybe:"72%",
          opentime:"未来一天",
          lastTime:"2018/03/20"
        },{
          name:"冷却器",
          equipstatus:"失效",
          age:1,
          maybe:"70%",
          opentime:"未来一天",
          lastTime:"2018/05/22"
        }]
      }
    },
    methods:{
      rowClassName({ row, rowIndex }){
        if(rowIndex%2 === 1){
          // console.log(rowIndex)
          return 'row-odd'
        }else{
          return 'row-even'
        }
      }
    }
  }
</script>

<style>
  .title{
    margin: 10px 2px;
    display: block;
    color: rgb(26, 187, 229);
  }


</style>
